
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="avalon.js"></script>

        <script >
            var model = avalon.define("performance", function(vm) {

                vm.array = [[1, 2], [4, 5], [7, 8]]
                vm.simple = ["aaaa", "bbb", "cccc"]
                vm.aaa = false
                vm.eee = "ddd"
                vm.item = {checked: 222}
                vm.items = [{checked: false}]


                vm.list = [{action: "数组里的"}];
                vm.action = "非的数组";

            })
            setTimeout(function() {
                model.action = "改非数组的"
                model.array[0].set(1, "更新了")
            }, 3000)




        </script>
        <script>

        </script>
    </head>
    <body>
        <fieldset ms-controller="performance">
            <table border="1" width="100%">
                <tr ms-repeat-elem="array">
                    <td ms-repeat="elem">{{el}}</td>

                </tr>
            </table>
            <table border="1" width="100%">
                <tr ms-repeat="simple">
                    <td>{{el}}</td>
                </tr>
            </table>
            <div style="border:1px solid red;">
                <div>{{action}}</div>
                <div ms-repeat-item="list">
                    <div>{{action}} or {{item.action}}</div>
                </div>
            </div>

            <p>{{item.checked}}</p>
            <p ms-each-item='items' style="border:1px solid greenyellow;">
                <input type='checkbox' ms-duplex-radio='item.checked' /> {{item.checked}}
            </p>

            <input type='checkbox' ms-duplex-radio='aaa' /> {{aaa}}  <span>{{aaa}}</span>  <b ms-text="aaa"></b>
        </fieldset>


    </body>
</html>
